<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" 
        background-color='#4d4d4d' 
        text-color='#ffffff' 
        default-active='$route.path'
        :collapse="collapse"
        unique-opened router>
        <template v-for="item in menuLists">
            <template v-if="item.subMenu">
                <el-submenu :index="item.index" :key='item.index'>
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                    <template v-for='tab in item.subMenu' :index="tab.index" v-if="tab.innerMenu">
                        <el-submenu  :index="tab.index" :key='tab.index'>
                            <template slot="title">
                                <i :class="tab.icon"></i>
                                <span slot="title">{{tab.title}}</span>
                            </template>
                            <el-menu-item v-for='(inner,j) in tab.innerMenu' :key='j' :index="inner.index">
                                {{inner.title}}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="tab.index" :key='tab.index'>
                            <i :class="tab.icon"></i>
                            <span slot="title">{{tab.title}}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key='item.index'>
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </template>
        </template>
    </el-menu>

  </div>

</template>
<script>
    import base from '../api/base.js'
    export default {
        data() {
            return {
                collapse: false,
                menuLists:[
                    {
                        icon:'el-icon-service',
                        title:'代理商管理',
                        index:'dailishang',
                        subMenu:[
                            {
                                title:'学员管理',
                                index:'xueyuan',
                                icon:'el-icon-menu',
                                innerMenu:[
                                    {
                                        index:'myStuInfos',
                                        title:'我的学员信息管理',   
                                    }
                                ]
                            },
                            {
                                icon:'el-icon-menu',
                                title:'账户管理',
                                index:'zhanghu',
                                innerMenu:[
                                    {
                                        index:'baseInfo',
                                        title:'基本资料',   
                                    },
                                    {
                                        index:'personalAccount',
                                        title:'账户信息',   
                                    },
                                ]
                            },
                            {
                                icon:'el-icon-menu',
                                title:'体验班管理',
                                index:'tiyanban',
                                innerMenu:[
                                    {
                                        index:'experienceClass',
                                        title:'体验班管理',   
                                    },
                                    {
                                        index:'experienceTable',
                                        title:'体验班课表',   
                                    },
                                ]
                            },
                            {
                                icon:'el-icon-menu',
                                title:'正式课管理',
                                index:'zhengshike',
                                innerMenu:[
                                    {
                                        index:'formalClass',
                                        title:'正式课管理',   
                                    },
                                    {
                                        index:'formalTable',
                                        title:'正式课课表',   
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        icon:'el-icon-share',
                        index:'hezuoxiao',
                        title:'合作校信息', 
                    },
                    {
                        icon:'el-icon-setting',
                        index:'guanliyuan',
                        title:'管理员管理',
                        subMenu:[
                            {
                                icon:'el-icon-menu',
                                title:'权限管理',
                                index:'quanxian',
                                innerMenu:[
                                    {
                                        index:'backUserManage',
                                        title:'后台用户管理',   
                                    },
                                    {
                                        index:'userGroupManage',
                                        title:'用户组管理',   
                                    },
                                    {
                                        index:'menuTree',
                                        title:'菜单树管理',   
                                    },
                                ]
                            }
                        ]
                    }
                ]
            };
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            openFullScreen2() {
                const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                loading.close();
                }, 2000);
            },
            getAllNode(){
                 this.$axios({
                    url: base.baseUrl+"/school/setting/get-node-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        // this.menuLists=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            }
        },
        created() {
            this.getAllNode()
        },
    };

</script>
<style lang="less" scoped>
    .sidebar{
        display: block;
        position: fixed;
        left: 0;
        height: 100%;
        box-sizing: border-box;
        padding-top: 70px;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 270px;
    }
    .sidebar > ul {
        height:100%;
    }
</style>

